<template>
    <div>       
        <div class="topImg">
            <img src="../../assets/img/find/mycourse_04.jpeg" alt="">
            <TopBar class="t" :title="''" color="#fff" :url="'/find'"></TopBar>
        </div>
        <h2><span>跑步</span>HIIT燃脂跑终极教程</h2>
        <div class="pricebox">
            <span>￥120.00</span><span>￥149.00</span><span>限时促销</span>
        </div>
        <div class="info">
            <div>
            <span>级别：HT2</span>
            <span>时长：20分钟</span>
            </div>
            <div>
            <span><van-rate v-model="value" allow-half void-icon="star" void-color="#eee" color="#ffd21e"/></span><span>4.5</span>
            </div>
        </div>
        <h1>教练介绍</h1>
        <div></div>
        <p>国家一级健身教练，主修健美、健体、游泳专业，曾连续获得多次国家组织的健美大赛奖项。国家一级健身教练，主修健美、健体、游泳专业。</p>
        <h1>课程介绍</h1>
        <div class="detail">
            <img src="../../assets/img/find/mycourse_04.jpeg" alt="">
            <span>从今天起</span><span>为了未来</span><span>RUN!</span>
        </div>
        <div class="buy"><span>私信教练</span><span>收藏</span><span>试看</span><span @click="buyHandler">立即购买</span></div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Rate } from 'vant';

Vue.use(Rate);
import TopBar from "@/component/TopBar";
export default{
     components:{
            TopBar
        },
          data() {
            return {
            value: 4.5,
            };
        },
        methods:{
            buyHandler(){
                this.$router.push('/pay/index')
            }
        }
}
</script>

<style lang='stylus' scoped>
    .topImg
        width 100%
        height 2rem
        overflow hidden
        position relative
        img 
            width 100%
            position absolute
            top -.4rem
        .t
            position absolute
            top .2rem
            left .15rem
    h2
        color #343434
        font-size .2rem
        padding .1rem .14rem
        span 
            background-color #fec600
            color #fff7db
            display inline-block
            width  .4rem
            height  .2rem
            font-size  .1rem
            vertical-align middle
            line-height .2rem
            text-align center 
            border-radius .2rem
            margin-right .14rem
    .pricebox
        display flex 
        padding 0 .14rem
        align-items flex-end
        span:nth-of-type(1)
            flex 105
            font-size .21rem
            font-weight 600
            color #6e59fb
        span:nth-of-type(2)
            flex 212
            font-size .15rem
            color #d1d1d1
            text-decoration  line-through
        span:nth-of-type(3)
            flex 68
            font-size .13rem
            color #fed555
            text-align center 
            display inline-block
            border 1px solid #fed555
            border-radius .2rem
            height .21rem
            width 100%
            align-self center 
    .info
        color #d1d1d1
        font-size .12rem
        display flex 
        padding .05rem .14rem
        justify-content space-between
        align-items center 
        div:first-child
            span
                margin-right .15rem
        div:last-child
            span
                font-size  .15rem

    h1
        font-size .18rem
        padding 0 .14rem 
        color #323232
    p
        padding .03rem .14rem .1rem .14rem
        color #343434

    .detail
        width 3.75rem
        height 1.8rem
        background-color pink 
        overflow-y scroll
        overflow-x hidden
        position relative
        img 
            width 200%
            position absolute
            left -2rem
        span
            position fixed
            left .2rem
            font-size .3rem
            color #fff
            font-weight 900
            &:nth-of-type(1)
              bottom 1.6rem
            &:nth-of-type(3)
              bottom  .8rem
            &:nth-of-type(2)
              bottom 1.2rem
              left 2.3rem
    
    .buy
        height .4rem 
        span 
            display inline-block 
            width .8rem
            height .3rem    
            background-color #eee
            margin .05rem 
            text-align center 
            vertical-align middle
            line-height  .3rem 
        span:nth-child(1),span:nth-child(2)
            border-radius  .3rem
        span:nth-child(3)
            border-top-left-radius .3rem
            border-bottom-left-radius .3rem
            border-right 2px solid 
            background-color #6e59f6
            color #fff
            margin 0rem 
        span:nth-child(4)
            border-top-right-radius .3rem
            border-bottom-right-radius .3rem
            background-color #6e59f6
            color #fff
            margin 0rem 

</style>